<template>
  <!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中-->
  <!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出-->
  <el-dialog title="添加团队" :visible.sync="detailVisible" width="50%">
    <add-group v-model="value" :dataList="list" :columns="columns" keyName="id" @change="change"></add-group>
    <el-button style="margin-left: 320px;" type="success" round @click="noshow()">确认</el-button>
  </el-dialog>
</template>

<script>
  import AddGroup from '@/components/group/addGroup.vue'
  export default {
    name: "dialogComponentAddGroup",
    components: {
      AddGroup,
    },
    data() {
      return {
        value:[],
        columns:[],
        detailVisible: false,
        list: [
        ],
      }
    },
    methods: {
      //3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
      init() {
        this.detailVisible = true;
        //data是父组件弹窗传递过来的值，我们可以打印看看
        console.log("123");
      },
      change(val) {
        console.log(val);
        console.log(this.value)
      },
      noshow(){
        this.detailVisible=false;
      }
    }
  }
</script>
